<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../static/js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
    <table border="2" align="center">
        <tr>
            <td colspan="4"><input id="girlId" v-model="vals" type="text"></td>
            <td><button @click="selectOneGirl()">查询</button></td>
        </tr>
        <tr>
            <td>序号</td>
            <td>型号</td>
            <td>年龄</td>
            <td>操作</td>
            <td>操作</td>
        </tr>
        <tr v-for="site in sites">
            <td v-text="site.id"></td>
            <td v-text="site.cupSize"></td>
            <td v-text="site.age"></td>
            <td><a href="javascript:;" @click="deleteGirl(site.id)">删除</a></td>
            <td><a href="javascript:;" @click="updateGirl(site.id,site.cupSize,site.age)">更新</a></td>
        </tr>
        <tr>
            <td align="center" colspan="5" v-if="sites==''">空</td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <button @click="insertBtn()">添加用户</button>
            </td>
        </tr>
    </table>
    </div>

    <!--插入-->
    <div id="fomDiv" class="row" style="display: none">
        <table border="2" align="center">
            <form>
                <tr>
                    <td>序号</td>
                    <td><input id="id" name="id" type="text" /></td>
                </tr>
                <tr>
                    <td>型号</td>
                    <td><input id="cupSize" name="cupSize" type="text" /></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input id="age" name="age" type="text" /></td>
                </tr>
            </form>
            <tr>
                <td colspan="2" align="center">
                    <button @click="insertTrue()">添加</button>
                </td>
            </tr>
        </table>
    </div>

    <!--更改-->
    <div id="updateBtn" style="display: none">
        <table border="2" align="center">
            <tr>
                <td>序号</td>
                <td><input id="uId" name="id" type="text" disabled/></td>
            </tr>
            <tr>
                <td>型号</td>
                <td><input id="uCupSize" name="cupSize" type="text" /></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input id="uAge" name="age" type="text" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button @click="updateTrue()">更新</button>
                </td>
            </tr>
        </table>
    </div>

</div>

</body>
<script type="text/javascript" >
    var app  = new Vue({
        el: '#app',
        data: {
            sites: [],
            vals:""
        },
        created: function () {
            //为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
            var self = this;
            $.ajax({
                url: 'http://localhost:8080/jsonGirls',
                type: 'post',
                dataType: 'json'
            }).then(function (res) {
                self.sites = res;
            }).fail(function () {
                console.log('失败');
            })
        },
        methods: {
            selectOneGirl: function () {
                var self = this;
                $.ajax({
                    url:'http://localhost:8080/selectOne?id='+app.vals,
                    type: 'post',
                    dataType: 'json'
                }).then(function (res) {
                    self.sites = res;
                }).fail(function () {
                    console.log('失败');
                })
            },
            deleteGirl: function (id) {
                var r=confirm("是否删除数据！")
                if (r==true)
                {
                    $.ajax({
                        url: 'http://localhost:8080/delete?id='+id,
                        type: 'post',
                        dataType: 'json'
                    }).then(function (res) {
                        if (res==1){
                            alert("删除成功");
                            window.location.reload();
                        }else{
                            alert("删除失败")
                        }
                    }).fail(function () {
                        alert("失败");
                    })
                }
                else
                {
                    return;
                }

            },
            updateGirl: function (id,cupSize,age) {
                if($("#updateBtn").css("display")=="none"){
                    $("#updateBtn").attr("style","display:block;");
                }else{
                    $("#updateBtn").attr("style","display:none;");
                }
                $("#uId").val(id);
                $("#uCupSize").val(cupSize);
                $("#uAge").val(age);
                //window.location.href="http://localhost:63342/wyj/templates/selectOne.html?id="+id;
            },
            insertBtn:function () {
                if($("#fomDiv").css("display")=="none"){
                    $("#fomDiv").attr("style","display:block;");
                }else{
                    $("#fomDiv").attr("style","display:none;");
                }
            },
            insertTrue:function () {
                $.ajax({
                    url: 'http://localhost:8080/insertGirl',
                    type: 'post',
                    data: {"id":$("#id").val(),"cupSize":$("#cupSize").val(),"age":$("#age").val()},
                    dataType: 'json'
                }).then(function (res) {
                    if (res!=null){
                        alert("添加成功");
                        window.location.reload();
                    }else{
                        alert("添加失败")
                    }
                }).fail(function () {
                    alert("失败");
                })
            },
            updateTrue: function () {
                $.ajax({
                    url: 'http://localhost:8080/update',
                    type: 'post',
                    data: {"id":$("#uId").val(),"cupSize":$("#uCupSize").val(),"age":$("#uAge").val()},
                    dataType: 'json'
                }).then(function (res) {
                    if (res!=null){
                        alert("更新成功");
                        window.location.reload();
                    }else{
                        alert("更新失败")
                    }
                }).fail(function () {
                    alert("失败");
                })
            }
        }
    })

</script>
</html>